import React from "react";
//1. 导入模块名称 来自swiper模块
import { Navigation, Pagination,Autoplay ,EffectCube } from 'swiper';
import { Swiper, SwiperSlide } from "swiper/react";
// 2. 导入模块样式
import "swiper/css";
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/effect-cube'
export default function MySwiper(props) {
  return (
    <Swiper
      //3.  modules={[模块名称,...]}
      modules={[Navigation, Pagination,Autoplay,EffectCube  ]}
      //4. 继续配置Swiper标签上写上模块名称  小写
      //5. 配置属性 语法： pagination={ {配置信息内容} }
      //6. 如果没有swiper-react网站上没有这个模块 使用功能直接写Swiper属性上 比如：loop  effect ={'cube'}
      //  navigation
      pagination ={{ clickable: true }}
      autoplay = { {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: false,
        } }
      loop
    //   effect ='cube'
    //   effectcube={ {
    //     slideShadows: true,
    //     shadow: true,
    //     shadowOffset: 100,
    //     shadowScale: 0.6
    //   }}
      slidesPerView={1}
      // onSlideChange={(e) => {
      //   console.log(e.activeIndex)
      // }}
      onSwiper={(swiper) =>{//获取swiper实例对象
        // console.log(swiper);
        swiper.slideTo(1)
      }}
    >
        {
            props.arr.map(ele=>{
                return  <SwiperSlide key={ele.id}>
                    <img src={ele.imgUrl} width='100%' alt="" />
                </SwiperSlide>
            })
        }
     
    </Swiper>
  );
}
